<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2018年水上安全应急演练数字桌面系统</title>
<link href="__UI__/css/bs3/dpl-min.css" rel="stylesheet" type="text/css" />
<link href="__UI__/css/bs3/bui-min.css" rel="stylesheet" type="text/css" />
<link href="__UI__/css/login.css" rel="stylesheet" type="text/css"/>
<link href="__UI__/css/style.css" rel="stylesheet" type="text/css"/>

<style type="text/css">

.main{
	margin-top:16%;
}

.main h1 {
    font-size: 25px;
    color: #676767;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    padding: 6% 0px;
    text-align: center;
}

.login-form {
	margin:5% auto 4% auto;
}

#tabbox{
	width:33%;
	overflow:hidden;
	height:38%;
	margin:0 auto;
	background-image:url(__UI__/img/login_bg.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	
}

.tab_con{
	display:none;
}

.tabs{
	height: 30px;
	width: 100%;	
}

.tabs li{
	float:left;
	width:50%;
	height:40px;
	line-height:40px;
	background: #F7DA55;
	overflow: hidden;
	position: relative;
}

.tabs li a {
	display: block;
	padding: 0 20px;
	outline: none; 
	text-decoration: none;
	text-align:center;
}

.tabs li a:hover {
	background: #ccc;
}	

.tabs .thistab,.tabs .thistab a:hover{
	background: #eee;
	text-decoration: none;
}

.tab_con {
	padding:5px;
	font-size: 14px; 
	line-height:175%;
}
input[type="text"],input[type="password"]{
	text-indent:3em;
	text-align:left;
	position: relative;
	width:100%;
	height:40px;
	padding:1%;
	background-color:#FFF;
	background-repeat:no-repeat;
	background-position:1em;
	margin-bottom: 6%;
	font-family: 'Open Sans', sans-serif;
	color: #163cf9;
	font-weight:600;
	font-size: 14px;
	outline: none;
	border: none;
	border-radius: 5px;
	border:1px solid #DED6D6;
	-webkit-appearance:none;	
}
#username{	
	background-image:url(__UI__/img/zhanghao.png);
}
#password{
	
	background-image:url(__UI__/img/mima.png);
}
#verify{
	background-image:url(__UI__/img/yanzhengma.png);
}

.submit {
	height:50px;
	padding-bottom:20px;
}
#jzmm{
	background-image:url(__UI__/img/weixuan.png);
	background-repeat:no-repeat;
	background-position:left;
	text-indent:2em;
}
#dibu{
	color:#fff;
	text-align:center;
	font-weight:bold;
	position:fixed;
	bottom:0;
	width:100%;
	height:40px;
	line-height:40px;
}
#dlfs{
    width: 8%;
    height: 70%;
    position: absolute;
    top: 15%;
    right: 0px;
}
#dlfs li{
	width:100%;
	height:36px;
	line-height:36px;
	background-color:#568aff;
	color:#fff;
	text-indent:1em;
	cursor:pointer;
}
#dlfs .mt{
	margin-top:15px;
}
#dlfs .on{
	background-color:#163cf9;
}
</style>
</head>
<body>
<div class="main">
	<div id="tabbox">
    	<!-- <ul class="tabs" id="tabs"> -->
        	<!-- <li><a href="#">普通用户登录</a></li> -->
            <!-- <li><a href="#">监管用户登录</a></li> -->
        <!-- </ul> -->
        <ul class="tab_conbox" id="tab_conbox">
        	<li class="tab_con">
			<form action="{:U('Public/checklogin')}" class="form-horizontal registerform" method="post" enctype="multipart/form-data">
				<!-- <div class="login-head"><h1>桌面演练辅助应用系统</h1></div> -->
				<input type="text" name="username" id="username" class="input-large" datatype="*" nullmsg="请输入用户名称！" ajaxurl="{:U('Public/checkname')}" sucmsg="" onFocus="this.value = '';" onBlur="if(this.value == '') {this.value = '请输入用户名称！';}" value="请输入用户名称！">
				<input type="password" name="password" id="password" class="input-large" datatype="*6-16" nullmsg="请输入用户密码！" errormsg="密码范围在6~16位之间！" onFocus="this.value = '';" onBlur="if(this.value == '') {this.value = '请输入用户密码！';}" value="请输入用户密码！">
				<p>
                    <input name="verify" type="text" id="verify" datatype="*" nullmsg="请输入验证码！" onFocus="this.value = '';" onBlur="if(this.value == '') {this.value = '请输入验证码！';}" value="请输入验证码！" style="width:70%;float:left;" />
                    <img src="{:U('Public/verify')}" onClick="this.src=this.src+'?'+Math.random()" id="img" style="width:27%; height:40px;"/>
				</p>
				
                <div style="float:left;width:100%;color:#fff;padding:0 5px 5px 5px;font-size:16px;">
					<div id="jzmm" style="float:left;width:50%;">记住密码 </div>
					<div style="float:left;width:45%;text-align:right;">忘记密码</div>
				</div>
				
                <input type="hidden" name="gid" value="1">
                <div class="submit">
                    <input type="submit" value="登录" ><span id="msgdemo2"></span>
                </div>
            </form>
            </li>
            
            <!-- <li class="tab_con"> -->
			<!-- <form action="{:U('Public/checklogin')}" class="form-horizontal registerforms" method="post" enctype="multipart/form-data"> -->
				<!-- <div class="login-head"><h1>桌面演练辅助应用系统</h1></div> -->
				<!-- <input type="text" name="username" id="username" class="input-large" datatype="*" nullmsg="请输入用户名称！" ajaxurl="{:U('Public/checkname')}" sucmsg="" onFocus="this.value = '';" onBlur="if(this.value == '') {this.value = '请输入用户名称！';}" value="请输入用户名称！"> -->
				<!-- <input type="password" name="password" id="password" class="input-large" datatype="*6-16" nullmsg="请输入用户密码！" errormsg="密码范围在6~16位之间！" onFocus="this.value = '';" onBlur="if(this.value == '') {this.value = '请输入用户密码！';}" value="请输入用户密码！"> -->
				<!-- <p> -->
                    <!-- <input name="verify" type="text" id="verify" datatype="*" nullmsg="请输入验证码！" onFocus="this.value = '';" onBlur="if(this.value == '') {this.value = '请输入验证码！';}" value="请输入验证码！" style="width:70%;float:left;" /> -->
                    <!-- <img src="{:U('Public/verify')}" onClick="this.src=this.src+'?'+Math.random()" id="img" style="width:25%;"/> -->
				<!-- </p> -->
                <!-- <input type="hidden" name="gid" value="2"> -->
                <!-- <div class="submit"> -->
                    <!-- <input type="submit" value="登录" ><span id="msgdemos2"></span> -->
                <!-- </div> -->
			<!-- </form> -->
			<!-- </li> -->
        </ul>
    </div>
	<div id="dlfs">
		<ul>
			<li class="on">演练人员登录</li>
			<li class="mt">观察员登录 </li>
			<li class="mt">模拟人员登录</li>
			<li class="mt">评估人员登录</li>
			<li class="mt">管理员登录</li>
		</ul>
	</div>
</div>
<div id="dibu">
	版权所有：内蒙古自治区交通运输厅&nbsp;&nbsp;&nbsp;&nbsp;技术支持：内蒙古三叶电子有限责任公司
</div>
<script type="text/javascript" src="__UI__/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="__UI__/js/bui-min.js"></script>
<script type="text/javascript" src="__UI__/js/config-min.js"></script>
<script type="text/javascript" src="__UI__/js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
	BUI.use('bui/form', function (Form) {
        new Form.Form({
            srcNode:'#J_Form'
        }).render();
    });
	
	$(document).ready(function() {
		jQuery.jqtab = function(tabtit,tab_conbox,shijian) {
			$(tab_conbox).find("li").hide();
			$(tabtit).find("li:first").addClass("thistab").show(); 
			$(tab_conbox).find("li:first").show();
		
			$(tabtit).find("li").bind(shijian,function(){
			  $(this).addClass("thistab").siblings("li").removeClass("thistab"); 
				var activeindex = $(tabtit).find("li").index(this);
				$(tab_conbox).children().eq(activeindex).show().siblings().hide();
				return false;
			});
		
		};
		$.jqtab("#tabs","#tab_conbox","click");
	});

	$(function(){
		$(".registerform").Validform({
			tiptype:function(msg,o,cssctl){
				var objtip=$("#msgdemo2");
				cssctl(objtip,o.type);
				objtip.text(msg);
			},
			ajaxPost:true,
			callback:function(data){
				if(data.status == 's'){
					document.getElementById('img').src="{:U('Public/verify')}";
				}
				if(data.status == 'y'){
					window.location.href="{:U('Index/index')}";
				}
			},
		});
	});
	
	$(function(){
		$(".registerforms").Validform({
			tiptype:function(msg,o,cssctl){
				var objtip=$("#msgdemos2");
				cssctl(objtip,o.type);
				objtip.text(msg);
			},
			ajaxPost:true,
			callback:function(data){
				if(data.status == 's'){
					document.getElementById('img').src="{:U('Public/verify')}";
				}
				if(data.status == 'y'){
					window.location.href="{:U('Index/index')}";
				}
			},
		});
	});
	
	$(function(){
		$('#jzmm').click(function(){
			$('#jzmm').css('background-image','url(__UI__/img/xuanzhong.png)');
		})
	
		$('#dlfs li').click(function(){
		   $('#dlfs li').css('background-color','#568aff');
		   $(this).css('background-color','#163cf9');
		})
	})
	
</script>
</body>
</html>
